<template>
	<view class="content-img">
		<eui-nav-bar title="打印设置" color="#333" rightIcon="" />
	</view>
	<scroll-view  scroll-y="true" class="main-view font-size-28" :style="{width:scrollWidth,height:scrollHeight}">
    <view class="background-color-fff border-radius-20 margin-top-12 padding-left-28">
      <eui-card-input v-model="autoPrint" title="自动打印" type="switch" style="padding-left: 0" />
    </view>
    <view class="margin-top-20 color-888 font-size-26">打印机设置</view>
    <view class="background-color-fff border-radius-20 margin-top-12 padding-left-28">
<!--      <eui-card-input v-model="printerType" :range="printerTypeList" title="打印机类型" type="selector" placeholder="请选择" alignType="right" rightIconType="right" style="padding-left: 0;" />-->

      <view v-show="printerType === 'bluetoothPrinter'">
        <eui-card-input v-model="bluetoothPrinter.printerName" @click="openBluetoothPrinterSelector" title="蓝牙打印机" placeholder="请选择" type="text" alignType="right" rightIconType="right" displayable style="padding-left: 0" />
        <eui-card-input v-model="bluetoothPrinter.printDelayTime" :range="printDelayTimeList" title="打印延迟" placeholder="" type="selector" alignType="right" rightIconType="right"  style="padding-left: 0" />
      </view>
      <view v-show="printerType === 'networkPrinter'">
        <eui-card-input v-model="networkPrinter.host" title="网络打印机" placeholder="请选择" type="text" alignType="right" rightIconType="right" displayable style="padding-left: 0" />
      </view>
      <view v-show="printerType === 'directPrinter'">
        <eui-card-input v-model="directPrinter.printerName" title="直连打印机" placeholder="请选择" type="text" alignType="right" rightIconType="right" displayable style="padding-left: 0" />
      </view>
    </view>
		<view class="margin-top-20 color-888 font-size-26">打印次数设置</view>
		<view class="background-color-fff border-radius-20 margin-top-12 padding-left-28">
      <eui-card-input v-model="printTimes.customerReceipt" :range="printTimesList" title="顾客联" type="selector" placeholder="请选择" alignType="right" rightIconType="right"  style="padding-left: 0" />
      <eui-card-input v-model="printTimes.pickupReceipt" :range="printTimesList" title="拣货联" type="selector" placeholder="请选择" alignType="right" rightIconType="right"  style="padding-left: 0" />
      <eui-card-input v-model="printTimes.merchantReceipt" :range="printTimesList" title="商家联" type="selector" placeholder="请选择" alignType="right" rightIconType="right"  style="padding-left: 0" />
		</view>
    <view class="margin-top-20 color-888">打印小票商品排序方式</view>
    <view class="background-color-fff border-radius-20 margin-top-12 padding-left-28">
      <eui-card-input v-model="orderGoodsPrintSortType.customerReceipt" :range="orderGoodsPrintSortTypeList" title="顾客联" type="selector" placeholder="请选择" alignType="right" rightIconType="right"  style="padding-left: 0" />
      <eui-card-input v-model="orderGoodsPrintSortType.pickupReceipt" :range="orderGoodsPrintSortTypeList" title="拣货联" type="selector" placeholder="请选择" alignType="right" rightIconType="right"  style="padding-left: 0" />
      <eui-card-input v-model="orderGoodsPrintSortType.merchantReceipt" :range="orderGoodsPrintSortTypeList" title="商家联" type="selector" placeholder="请选择" alignType="right" rightIconType="right"  style="padding-left: 0" />
    </view>
    <view class="margin-top-20 color-888">打印任务</view>
    <view class="background-color-fff border-radius-20 margin-top-12 padding-left-28">
      <eui-card-input v-model="standByPrintCnt" title="待打印数量" @click="showPrintTask" type="text" displayable="true" placeholder="请选择" alignType="right" rightIconType="right"  style="padding-left: 0" />
      <eui-card-input v-model="status" :range="statusList" title="打印状态" @click="showPrintStatus" type="selector" displayable="true" placeholder="请选择" alignType="right" rightIconType="right"  style="padding-left: 0" />
      <view class="item" v-if="message">
        <view class="left">
          <view class="color-666">错误信息</view>
        </view>
        <view class="right">
          <eui-button type="min2" minWidth="100" @buttonClick="showPrintMessage" title="查看" />
        </view>
      </view>
    </view>
    <view class="padding-bottom-60" :class="[theme]">
      <view class="setting-logOut margin-top-60" @click="printTest">打印测试页</view>
    </view>
	</scroll-view>
</template>

<script setup lang="ts">
import {ref, watch} from 'vue';
import {onReady} from "@dcloudio/uni-app";
import {usePrinterStore} from "@/store/printerStore";
import {storeToRefs} from "pinia";
import BluetoothPrinter from '@/common/BluetoothPrinter';
import esc from "@/common/printer/esc";
import {usePrintTaskStore} from "@/store/usePrintTaskStore";
import { useThemeStore } from '@/store/themeStore';
// 使用 store 获取主题
const themeStore = useThemeStore();
const { theme } = storeToRefs(themeStore);

const scrollWidth = ref(uni.getSystemInfoSync().windowWidth - 20 + 'px');
const scrollHeight = ref(uni.getSystemInfoSync().windowHeight + 'px');

const printerStore = usePrinterStore();
const {printerType, autoPrint, bluetoothPrinter, networkPrinter, directPrinter, printTimes, orderGoodsPrintSortType} = storeToRefs(printerStore);

const usePrintTask = usePrintTaskStore();

let cnt = 1;

const printerTypeList = [
  {value: 'bluetoothPrinter', text: "蓝牙打印机"},
  {value: 'networkPrinter', text: "网络打印机"},
  {value: 'directPrinter', text: "直连打印机"},
];

const printDelayTimeList = [
  {value: 0, text: "不延迟"},
  {value: 10, text: "10毫秒"},
  {value: 20, text: "20毫秒"},
  {value: 30, text: "30毫秒"},
  {value: 50, text: "50毫秒"},
  {value: 100, text: "100毫秒"},
];

const printTimesList = [
  {value: 0, text: "不打印"},
  {value: 1, text: "打印1次"},
  {value: 2, text: "打印2次"},
  {value: 3, text: "打印3次"},
];

const orderGoodsPrintSortTypeList = [
  {value: 1, text: "按下单时商品顺序"},
  {value: 2, text: "按线下品类排序"},
];

watch(autoPrint, (newValue, oldValue) => {
  printerStore.setAutoPrint(newValue);
});

// input的selector不支持@change属性，使用watch处理
watch(printerType, (newValue, oldValue) => {
  printerStore.setPrinterType(newValue);
});

watch(bluetoothPrinter, (newValue, oldValue) => {
  printerStore.setBluetoothPrinter(newValue);
}, {deep: true});

watch(printTimes, (newValue, oldValue) => {
  printerStore.setPrintTimes(newValue);
}, {deep: true});

const openBluetoothPrinterSelector = () => {
  uni.navigateTo({
    url: './bluetoothPrinterSelector',
  });
}

const printTestPage = () => {
  uni.showLoading({title:"打印中..."});
  console.log('testPrint---->', "打印中");
  let command = esc.createNew()
  command.init();
  command.setPrint();
  command.bold(1);//加粗
  command.setFontSize(17);//字体大小
  command.setSelectJustification(1)//居中
  command.setText("打印测试页");
  command.setPrint();
  command.setPrintAndFeedRow(1);

  command.bold(0);//加粗
  command.setFontSize(0);//字体大小
  command.rowSpace(0);

  //打印条码
  let barcodeText = "12345678901234";
  command.setSelectJustification(0);
  command.setText("条形码:" + barcodeText);
  command.setPrint();
  command.setSelectJustification(1);
  command.setBarcodeWidth(3);
  command.setBarcodeHeight(80);
  let content = command.genCode128(barcodeText);
  command.setBarcodeContent('CODE128', content);
  command.setPrintBarCode();
  command.setPrint();
  command.setPrintAndFeed(80);

  //打印二维码
  let qrcodeText = "1234567890abcdef";
  command.setSelectJustification(0);
  command.setText("二维码:"+qrcodeText);
  command.setPrint();
  command.setStoreQRCodeData(qrcodeText);
  command.setSelectJustification(1); //居中
  command.setSelectSizeOfModuleForQRCode(5); //大小
  command.setPrintQRCode();
  command.setPrint();
  command.setPrintAndFeed(40);
  command.setText("------------*****------------");
  command.setPrint();
  command.setPrintAndFeed(160);
  console.log("BluetoothPrinter.checkAndPrint:then====>res", bluetoothPrinter.value);
  BluetoothPrinter.setDevice(bluetoothPrinter.value).checkAndPrint(command.getData()).then((res:any) => {
    uni.showToast({title: '打印完成'});
    console.log("BluetoothPrinter.checkAndPrint:then====>res", res);
  }).catch((res:any) => {
    console.log("BluetoothPrinter.checkAndPrint:catch====>res", res);
    uni.showModal({
      title: '打印失败',
      content: res.message,
      showCancel: false,
    })
  }).finally((res:any) => {
    uni.hideLoading();
  })
}
const printTest = () => {
  cnt++
  usePrintTask.addTask({
    id: cnt,
    task: () => new Promise(resolve => setTimeout(() => {
      console.log('Task ' + cnt + 'completed');
      printTestPage();
      resolve();
    }, 2000))
  })
}

onReady(() => {
  uni.getSystemInfo({
    success: function (res) {
      const userInfoPage = uni.createSelectorQuery().select(".content-img");
      userInfoPage.boundingClientRect(function (data: any) {
        scrollHeight.value = (res.windowHeight - data.height - 20) + 'px';
      }).exec()
    }
  });
})
</script>

<style lang="scss" scoped>
	@import '@/main.scss';

  .content-img {
    background-color: #FFFFFF;
    background-repeat: no-repeat;
    width: 100%;
  }

  .main-view {
    flex: 1;
    flex-direction: column;
    padding: 20rpx 20rpx 0;
    background-color: #f2f2f2;
  }

  .flex {
    display: flex;
  }

  .font-size-28 {
    font-size: 28rpx;
  }
  
  .font-size-26 {
		font-size: 26rpx;
	}

  .setting-logOut {
    display: flex;
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		border-radius: 20rpx;
		justify-content: center;
		align-items: center;
		color: var(--theme-color);
		font-size: 28rpx;
  }

  .padding-all-28 {
    padding: 28rpx;
  }

  .background-color-fff {
    background-color: #fff;
  }

  .border-radius-20 {
    border-radius: 20rpx;
  }

  .margin-top-20 {
    margin-top: 20rpx;
  }

  .margin-top-60 {
    margin-top: 60rpx;
  }

  .margin-top-12 {
    margin-top: 12rpx;
  }

  .color-888 {
    color: rgba(136, 136, 136, 1);
  }

  .main-theme {
    width: 80rpx;
    height: 80rpx;
    border-radius: 16rpx;
    margin-right: 32rpx;
    position: relative;
  }

  .main-theme-1 {
    background-color: rgba(2, 183, 230, 1);
  }

  .main-theme-2 {
    background-color: #FF6430;
  }

  .main-body .main-theme:last-child {
    margin-right: 0rpx;
  }

  .main-theme-sel {
    width: 25px;
    height: 25px;
    background: #ffffff;
    clip-path: polygon(100% 10%, 100% 100%, 10% 100%);
    position: absolute;
    bottom: 0px;
    right: 0px;
  }

  .main-theme-icon {
    position: absolute;
    bottom: 0px;
    right: 0px;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .padding-left-28 {
    padding-left: 28rpx;
  }
  .m-card-input-view {
    background-color: initial;
  }
  .color-666 {
    color: #666;
  }
  .item {
    border-bottom: 0.03125rem solid rgb(238, 238, 238);
    padding: 0.75rem 0.875rem 0.75rem 0;
    display: flex;
    flex-direction: row;
    width: 100%;
    box-sizing: border-box;
  }
  .item .left {
    flex: 1;
    align-self: center;
  }
  .item .right{
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .mine-list-item {
    height: 45px;
    line-height: 45px;
    border-bottom: 0.03125rem solid rgb(238, 238, 238);
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .padding-bottom-60{
    padding-bottom: 60rpx;
  }
</style>